<!DOCTYPE html>
<html>
	<meta charset="utf-8" />
<head>
    <!-- -->
	<title></title>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
	<style type="text/css">
		body,html{height:100%;overflow:hidden;}
		body,h2,p{
			margin:0px;
			-moz-user-select:none;/*火狐*/
			-webkit-user-select:none;/*webkit浏览器*/
			-ms-user-select:none;/*IE10*/
			-khtml-user-select:none;/*早期浏览器*/
			user-select:none;
		}
		body{font-size:16px;line-height:1.9em;color:#666;}
		p{text-indent:2em;padding:1% 2%;}
		.page{
			width:100%;
			height:100%;
			background-position:center;
			background-size:cover;
			background-attachment:fixed;
			position:absolute;/*作为容器*/
			top:0px;
		}
		.page-1{background-image:url("img/img0.jpg");}
		.page-2{background-image:url("img/img1.jpg")}
		.page-3{background-image:url("img/img2.jpg");}
		.page-4{background-image:url("img/img3.jpg");}
		.page-1,.page-2,.page-3,.page-4{position:absolute;}
		.upText{position:absolute;top:0;}
		.bottomText{position:absolute;bottom:0;}
		.white{color:#282e34;background:#f4f4f4;}
		.black{color:#f4f4f4;background:#282e34;}
		.theme{
			width:100%;
			color:#000;
			font-size:27px;
			text-align:center;
			text-transform:uppercase;/*字母大写*/
			letter-spacing:8px;/*字间距*/
			position:absolute;
			top:50%;
		}
		.theme .border{color:#fff;background-color:#111;padding:20px;}/*标题边框样式*/
		#nav{
			position:fixed;
			top:50%;
			right:2%;
			/*相对的空间内，垂直居中*/
			-webkit-transform:translateY(-50%);
          	transform:translateY(-50%);
		}
		.layui-icon{font-size:20px;color:#fff;}
		.layui-icon-up:hover,.layui-icon-down:hover{color:#5FB878;}
		@media screen and (max-width:768px){
			p{font-size:14px;}
			.theme .border{color:#fff;background-color:#111;padding:14px;font-size:18px;}
		}
		@media screen and (min-height:768px) and (max-width:992px){
			p{font-size:16px;}
			.theme .border{color:#fff;background-color:#111;padding:18px;font-size:22px;}
		}
		@media screen and (min-width:992px) and (max-width:1200px){
			p{font-size:18px;}
		}
		@media screen and (min-width:1200px){
			p{font-size:20px;}
		}
		h1{font-size:30px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.2);
		color: #FF0000;
		}
		.sf{font-size:20px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.2);
		color:#FF00FF;
		}
		#header{
	background:url(img/header.jpg) no-repeat 0 0;
	height:330px;
	position:relative;
	width:778px;
	margin:0 auto;
	}
	#upperbody{
	width:750px;
	color:#646464;
	margin:20px auto;
	padding-top:26px;
	
	background:url(img/welcom_top.gif) no-repeat 0 0 #1d1d1d;
	}
	
#upperbody span.bot{
	height:17px;
	display:block;
	margin:0;
	padding:0;
	width:750px;
	}
	
#upperLeft{
	width:441px;
	float:left;
	padding:0 0 0 11px;
	background-color:black;
	}
	.text{
	font-size:11px;
	line-height:16px;
	padding:0 0 20px 0;
	}
	
.text a{
	color:#646464;
	background-color:#1d1d1d;
	text-decoration:none;
	}
	
.text a:hover{
	text-decoration:none;
	color:#fff;
	background-color:#1d1d1d;;
	}
	
.text span{
	color:#aaad93;
	background-color:inherit;
	}
	.more{
	color:#e8e9c5;
	background-color:#2c2c2c;
	font-size:11px;
	font-weight:bold;
	line-height:24px;
	height:24px;
	display:block;
	padding:0 22px 0 0;
	border-bottom:#3d3d3d 1px solid;
	border-top:#3d3d3d 1px solid;
	text-align:right;
	text-decoration:none;
	}
	
.more:hover{
	color:#fff;
	background-color:#2c2c2c;
	}
	#upperRight{
	width:268px;
	float:right;
	padding:0 11px 0 0;
	background-color: #000000;
	}
.margin_top{
	margin:18px 0 5px 0;
}
.yuan{
    border-radius: 25px;
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

	</style>
	<script type="text/javascript" src="layui/layui.js">
	</script>
</head>

<body>	
	
	<div class="page page-1" style="z-index:2;">

            <div class="layui-container">
                <div  class="layui-container yuan"style="background-color:whitesmoke; width: 800px; height:700px; text-align: center; margin: 2% auto 0 auto;">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item" style="padding-top: 10px;">

                            <div style="text-align: left; margin-bottom: 20px;">
                                <h1 style="border-bottom: #c2c2c2 1px solid; font-size: 24px;color: #1E9FFF;font-weight: bold;">废旧新能源汽车填写表单</h1>
                            </div>

    <div class="layui-inline">
      <label class="layui-form-label">车牌号码</label>
      <div class="layui-input-block">
        <input type="text" name="licensePlateNumber"  lay-verify="chehao" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">车辆编号</label>
      <div class="layui-input-inline">
        <input type="text" name="carID" lay-verify="chenum" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">上牌时间</label>
      <div class="layui-input-block">
        <input type="text" name="theRegistrationTimeFrom" id="date1" lay-verify="date1" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">至今</label>
      <div class="layui-input-inline">
        <input type="text" name="theRegistrationTimeTo" id="date2" lay-verify="date2" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <!--
  -->
  <div class="layui-form-item">
    <label class="layui-form-label">车辆信息</label>
    <div class="layui-input-inline">
      <select name="type" lay-search="" lay-verify="chexx">
        <option value="SUV">SUV</option>
          <option value="微型汽车">微型汽车</option>
          <option value="小型汽车">小型汽车</option>
        <option value="中型汽车">中型汽车</option>
        <option value="中大型汽车">中大型汽车</option>
        <option value="皮卡">皮卡 </option>
        <option value="豪华车">豪华车</option>
        <option value="面包车">面包车</option>
      </select>
    </div>
    <div class="layui-input-inline" >
      <select name="km" lay-search="" lay-verify="">
        <option value="里程">里程</option>
        <option value="1到2万公里">1到2万公里</option>
        <option value="2到5万公里">2到5万公里</option>
        <option value="5到10万公里">5到10万公里</option>
        <option value="10到15万公里">10到15万公里</option>
        <option value="15万公里以上">15万公里以上</option>
      </select>
    </div>
    <div class="layui-input-inline"  >
      <select name="brand" lay-search="" lay-verify="">

      </select>
    </div>
  </div>
		

		<hr style="border-bottom: 0px #000000 solid;" />
		
		  	<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">预约日期</label>
      <div class="layui-input-block">
        <input type="text" name="makeDate" id="date3" lay-verify="" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">详细时间</label>
      <div class="layui-input-inline">
        <input type="text" name="makeTime" id="date4" lay-verify="" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  
  
	 <div class="layui-form-item">

         <div class="layui-inline">
             <label class="layui-form-label">姓名 </label>
             <div class="layui-input-inline">
                 <input type="text" name="name"  class="layui-input">
             </div>
         </div>

        <div class="layui-inline">
          <label class="layui-form-label">手机号码</label>
          <div class="layui-input-inline">
            <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
          </div>
        </div>

    </div>
		
		
		
		
		<div class="layui-form-item">
    <label class="layui-form-label">身份证:</label>
    <div class="layui-input-block">
      <input type="text" name="identityCard" lay-verify="identity" placeholder="务必填写正确" autocomplete="off" class="layui-input" style="width: 87%;">
    </div>
  </div>
			<div class="layui-form-item">
    <label class="layui-form-label">上门地址</label>
    <div class="layui-input-block">
      <input type="text" name="address" lay-verify="" placeholder="请详细到门牌号码" autocomplete="off" class="layui-input" style="width: 87%;">
    </div>
  </div>

		
		<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">注意事项</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" name="content" class="layui-textarea"></textarea>
    </div>
  </div>
		<div class="layui-form-item layui-container" >
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>		
		<!--
        	尾部
       -->				
</form>
</div>
</div>
</div>
			
	</div>
	<div class="page page-2" style="z-index:1">
<div class="layui-container" >
	<!--头图片文件  -->
<div id="header">	
	<h1 style="text-align: center; padding-top: 152px;">欢迎浏览，期待与您合作</h1>
	</div>
	
	<div id="upperbody">
			<div>
				<!--upper left part stat -->
					<div id="upperLeft">
						<h2 class="headingText">废车回收有必要吗？</h2>
						<p class="text">
							《报废机动车回收管理办法（修订草案）》日前获国务院常务会议审议通过。这也是2001年来，
							中国首次对报废汽车回收规定进行大调整。
						</p>
						<p class="text">按现行规定，为防止报废车和拼装车上路成为“马路杀手”，报废机动车发动机、变速器、前后桥等零部件（“五大总成”）只能作为冶炼原料回炉，价格参考废旧金属处理。
但根据新规，这些零部件如果满足条件，可以卖给具有再制造能力的企业重新使用，回收价格由市场主体自行协商确定。 <br />
					    这是什么意思呢？相当于以前报废汽车回收是“卖破烂”，回收企业得不了多少钱，对车主老旧汽车的收购价自然也就上不去；以后有用的零部件能再次使用，老旧汽车的剩余价值会大大提高。
用官方的话说，以前的做法“不能充分体现车主私有财产价值”，新规更好地体现了对老百姓合法权利和财产价值的尊重。这样一来，车主和回收企业都得了实惠。</p>
						<p class="text">这一修改对中国汽车行业和宏观经济也有好处。当前中国汽车消费低迷，连带整体消费增速也随之降温。只有鼓励人们把该报废的老旧汽车及时报废，才能为买新车腾出空间。
						商务部副部长王炳南介绍说，以前办理注销登记手续主要由车主自己办理，但新规明确要求由回收企业办理，办完后交给车主。
企业也能获得不少便利。新规多个条款体现了对企业的服务理念，如简化工作程序，减少重复报送信息，利用信息化手段进行网上申请、网上受理，推动信息公开等
						</p>
						<a class="more" href="#">了解更多</a>
			  </div>		
			
			
			
			 <div id="upperRight">
						<h2 class="headingText">新能源汽车的再次利用</h2>
						<div>
				 		 <img src="img/preview.jpg" alt="" width="123" height="79" align="left" class="margin_top" />
						 <img src="img/preview1.jpg" alt="" width="123" height="79" align="right" class="margin_top" />
						 <br class="spacer" />
			    </div>
						 <p class="text"> 纯电驱动的车辆指的是只有电机作为驱动方式的车辆，包括纯电动车以及增程式电动车，目前动力驱动的形式就是电机+单档减速器，
因为电机转速范围广，目前主流的转速为12000转，16000转，此转速基本无需多档便可满足电动车的绝大多数的车速使用需求（当然为了平衡动力经济性的需求，开发两档除外，目前问题较多，此间不再赘述），因此电动车在驾驶性上无丝毫换挡引起的顿挫。
同时电机响应迅速，低转速扭矩大，在驾驶性上有很多传统燃油车无法比拟的优势。 </p>
						 <p class="text"> 电动车和大部分插电混动车辆，都有一定的纯电续驶里程，在家庭充电方便的情况下，用电的成本比用油节省的多，同样以上面的车辆为例。</p>
						 
					 </div>		 
		</div>
		
		
	</div>
	
	</div>
	
	

	
	<div id="nav" style="z-index:4">
		<div class="layui-icon layui-icon-up"></div>
	  	<nav>
	   		<ul>
	     		<li class="li-1 layui-icon layui-icon-circle-dot"></li>
	     		<li class="li-2 layui-icon layui-icon-circle-dot"></li>
	   		</ul>
	  	</nav>
	  	<a><div class="layui-icon layui-icon-down"></div></a>
	</div>






<script type="text/javascript">
	//调用了layui模块来制作
	layui.use(['element','jquery','layer','form','layedit', 'laydate'],function(){
		var $=layui.jquery;
		var element=layui.element;
		var layer=layui.layer;
		var form=layui.form;
		var layedit=layui.layedit;
        var laydate=layui.laydate;
        
 laydate.render({
 elem: '#date1'
  });
  laydate.render({
   elem: '#date1'
  });
  laydate.render({
 elem: '#date2'
  });
  laydate.render({
   elem: '#date2'
  });
  
	 laydate.render({ 
  elem: '#date3'
  ,type: 'date'
  ,position: 'abolute'
});  
 laydate.render({ 
  elem: '#date4'
  ,type: 'time'
  ,position: 'abolute'
});

 $.ajax({
     type:"get",
     url:"category/brand",
     contentType:"application/json;charset=utf-8",
     dataType:"json",
     data:null,
     success:function(res){
         if(res!=null){
             for(var i = 0;i<res.length;i++){
                 $("[name='brand']").append('<option value="'+res[i].name+'">'+res[i].name+'</option>')
             }
             layui.use('form', function() {
                 var form = layui.form;
                 form.render();
             });
         }
     }
 })

//提交按钮事件
form.on('submit(demo1)', function(data){
  // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(JSON.stringify(data.field)) //当前容器的全部表单字段，名值对形式：{name: value}
    $.ajax({
        type:"post",
        url:"makeApp/save",
        contentType:"application/json;charset=utf-8",
        dataType:"json",
        data:JSON.stringify(data.field),
        success:function(res){
            if(res==1){
                layer.alert("提交成功！");
                window.location.href="index02.html";
            }
        },error:function(res){
            layer.alert("提交出现异常，请重新提交");
        }
    })
  return false;
});
//441502200012120652

	   })
	
	
	
</script>

	<script type="text/javascript">
		//调用jQuery
		layui.use(['jquery', 'layer'], function(){ 
  			var $ = layui.$,layer = layui.layer;
  				//使用jQuery
  			$(document).ready(function(){
  				var height=$(window).height();
  				var pageNumber=$(".page").length;//页面总数
  				var nowIndex=1;//当前页数:未防止多次滚动事件发生
  				var index=1;//防止多次滚动事件发生/:每次滚动鼠标时都是滚动很大一个幅度,而不是一小格的慢慢滚动,这就导致了滚动的时候会多次触发onmousewheel事件
  				var oldIndex=index;//未触发事件前的页数,用来分清图层动作
				var isSrolling=false;//若切屏进行，则不响应滚动
  				/*getScrollData(event)实现：兼容浏览器，获得每次滚动距离*/
  				function getScrollData(event){//不同浏览器每次滚动距离都不一样(FF每次滚动其data为3或者-3,其他为120或者-120) 
					var e=event||window.event;//BOM
					var data= e.detail||e.wheelDelta;//滚动距离 
					/*
					  e.detail为正值表向上滚。此时页面内容下降
					  e.wheelDelta为负值表向下滚。此时页面内容上升
					 */
					//alert(data); 
				} 
  				//IE8之外的绑定事件方法(document.attachEvent为IE绑定事件方法，document.addEventListener在IE9实现) 
				if(document.addEventListener && !document.attachEvent){
							document.addEventListener('mousewheel',getScrollData);   //非FireFox为文档滚动绑定滚动事件
							document.addEventListener('DOMMouseScroll',getScrollData); //FireFox为文档滚动绑定滚动事件
				}//IE8
				else
					document.attachEvent('onmousewheel',getScrollData);//IE为文档滚动绑定滚动事件
				function pageUp(){
					if(isSrolling)
						return;
					if(index>1){
						isSrolling=true;
						index--;
						green();
						if(index<oldIndex){
							$(".page-"+index).stop().animate({marginTop:0},1500,function(){
								oldIndex=index;
								isSrolling=false;
							});

						}console.log(oldIndex);
								console.log(index);
					}
				}
				function pageDown(){
					if(isSrolling)
						return;
					if(index<pageNumber){
						isSrolling=true;
						index++;
						green();
						if(index>oldIndex){
							$(".page-"+index).prevAll().stop().animate({marginTop:-height},1500);
							oldIndex=index;
							isSrolling=false;
								
						}
					}
				}
				/*鼠标滚动执行匿名函数*/
				$(document).on("mousewheel DOMMouseScroll", function(event){
      				if(event.originalEvent.wheelDelta>0){//event.wheelDelta正值向上滚
      				/*
      				  jquery中，最终传入事件处理程序的event其实已经被jQuery做过标准化处理
                          其原有的事件对象则被保存于event对象的originalEvent属性之中,每个event都是jQuery.Event的实例
                          所以event.originalEvent.wheelDelta就是指向原始的事件对象，另一个同理。
                        */
                       
                        	pageUp();
                    }
                    else//event.delta负值向下滚
                       	pageDown();
  				});
  				//切换按钮样式选择功能的实现
  				function green(){
  					$('#nav li').removeAttr("style");//用class会覆盖，此处用style，css优先级
					$('.li-'+index).attr("style","color:#5FB878;");
  				}
				//切换按钮功能的实现(css实现或js实现)
				$(".layui-icon-up").click(function(){pageUp();});
				$(".layui-icon-down").click(function(){pageDown();});
				$('.li-'+index).attr("style","color:#5FB878;");
				for(var i=0;i<pageNumber;i++){
					$('#nav li').click(function(){
						if(isSrolling)
							return;
						isSrolling=true;
						index=$(this).index()+1;//$('#nav li')[i]下标,index当前页数
						green();
						if(index>oldIndex){
							$(".page-"+index).prevAll().stop().animate({marginTop:-height},1000);
							$(".page-"+index).stop().animate({marginTop:0},1000);
							$(".page-"+index).nextAll().stop().animate({marginTop:0},1000);
						}
							/*
								$(".page-"+index).prevAll().css("transition","transform 1.5s ease").css("transform","translateY(-100%)");
								$(".page-"+index).css("transform", "translateY(0px)").css("transform", "translateY(0)").css("transform", "translateY(0px)");}
							 */
						else if(oldIndex>index){
							$(".page-"+index).stop().animate({marginTop:0},1000);
							$(".page-"+index).nextAll().stop().animate({marginTop:0},1000);
							/*
								$(".page-"+index).css("transform", "translateY(0px)").nextAll().css("transform", "translateY(0)").css("transform", "translateY(0px)");
							 */
						}
						oldIndex=index;
						isSrolling=false;
					})
					}
  				})
  		});
		</script>
    </body>
</html>